<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-100 to-cyan-100">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-blue-700">校园活动管理系统</h1>
        <ul class="flex space-x-6">
          <li>
            <router-link to="/public-activities"
              class="text-gray-700 hover:text-blue-500 transition-colors duration-300 font-medium">公开活动列表</router-link>
          </li>
          <template v-if="userRole === 'admin'">
            <li>
              <router-link to="/activity-management"
                class="text-gray-700 hover:text-blue-500 transition-colors duration-300 font-medium">活动管理</router-link>
            </li>
          </template>
        </ul>
      </div>
    </nav>
    <!-- 首页主体内容 -->
    <div class="container mx-auto px-4 py-16 flex flex-col items-center justify-center">
      <div class="bg-white p-8 rounded-lg shadow-xl max-w-3xl w-full text-center">
        <h2 class="text-4xl font-bold text-blue-700 mb-4">欢迎使用校园活动管理系统</h2>
        <p class="text-gray-600 text-lg mb-8">在这里，你可以方便地查看和管理校园活动。</p>
        <div class="flex space-x-4 justify-center mb-4">
          <router-link to="/public-activities"
            class="bg-blue-500 text-white py-3 px-6 rounded-md hover:bg-blue-600 transition-colors duration-300">查看活动列表</router-link>
          <template v-if="userRole === 'admin'">
            <router-link to="/activity-management"
              class="bg-green-500 text-white py-3 px-6 rounded-md hover:bg-green-600 transition-colors duration-300">管理活动</router-link>
          </template>
        </div>
        <button @click="logout"
          class="bg-red-500 text-white py-3 px-6 rounded-md hover:bg-red-600 transition-colors duration-300">退出登录</button>
      </div>
    </div>
    <!-- 页脚 -->
    <footer class="bg-white shadow-md mt-auto py-4">
      <div class="container mx-auto px-4 text-center text-gray-600">
        &copy; 2024 校园活动管理系统. 保留所有权利.
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userRole: ''
    };
  },
  created() {
    this.userRole = sessionStorage.getItem('userRole');
  },
  methods: {
    logout() {
      sessionStorage.removeItem('userRole');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加自定义样式，如果需要的话 */
</style>    